<!-- 应用详情 -->

<template>
  <div class="app-info source-box my-work">
    <el-form ref="form" :model="formInline" :rules="rules" size="small" label-position="left" label-width="150px">
      <el-row :gutter="20">
        <el-col :span="8" class="item-height">
          <el-form-item label="流程名称" prop="processName">
            <el-input class="full-width" maxlength="50" placeholder="请输入流程名称" v-model.trim="formInline.processName"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="8" class="item-height">
          <el-form-item label="流程类型" prop="processType">
            <el-select v-model="formInline.processType" class="full-width" placeholder="请选择类型">
              <el-option label="人事" value="1"></el-option>
              <el-option label="财务" value="2"></el-option>
              <el-option label="业务" value="3"></el-option>
              <el-option label="营销" value="4"></el-option>
              <el-option label="行政" value="5"></el-option>
              <el-option label="成本" value="6"></el-option>
              <el-option label="员工注册（公司唯一）" value="7"></el-option>
              <el-option label="员工出差（公司唯一）" value="8"></el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <!-- prop="enterpriseCode" -->
        <el-col :span="8" class="item-height">
          <el-form-item label="关联企业">
            <el-select class="full-width" v-model="formInline.enterpriseCode" placeholder="请输入搜索" remote filterable reserve-keyword :remote-method="remoteMethod">
              <el-option v-for="item in firmList" :key="item.orgCode" :label="item.orgName" :value="item.orgCode"></el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="8" class="item-height">
          <el-form-item label="审批去重" prop="approvalType">
            <el-select v-model="formInline.approvalType" class="full-width" placeholder="请选择去重">
              <el-option label="不去重" value="1"></el-option>
              <el-option label="保留第一个" value="2"></el-option>
              <el-option label="保留最后一个" value="3"></el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="8" class="item-height">
          <el-form-item label="人员结构" prop="strucCode">
            <el-row type="flex" justify="end">
              <el-select v-model="formInline.strucCode" class="full-width" placeholder="请选择结构" filterable>
                <el-option :label="item.structureName" :value="item.primaryKey" v-for="(item, index) in structureList" :key="index"></el-option>
              </el-select>
              <el-button style="margin-left: 10px" type="text" size="mini" @click="goStructureDetail" :disabled="!formInline.strucCode">查看</el-button>
            </el-row>
          </el-form-item>
        </el-col>

        <el-col :span="8" class="item-height">
          <el-form-item label="表单编码" prop="formKey">
            <el-row type="flex" justify="end">
              <el-select v-model="formInline.formKey" class="full-width" placeholder="请选择表单" filterable>
                <el-option :label="item.formName" :value="item.primaryKey" v-for="(item, index) in formList" :key="index"></el-option>
              </el-select>
              <el-button style="margin-left: 10px" type="text" size="mini" @click="goFormDetail" :disabled="!formInline.formKey">查看</el-button>
            </el-row>
          </el-form-item>
        </el-col>

        <el-col :span="24" class="item-height">
          <el-form-item label="pc审批页面路径" prop="pcDetailUrl">
            <el-input v-model="formInline.pcDetailUrl" class="input-box" placeholder="pc审批页面路径"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24" class="item-height">
          <el-form-item label="手机审批页面路径" prop="mobileDetailUrl">
            <el-input v-model="formInline.mobileDetailUrl" class="input-box" placeholder="手机审批页面路径"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="24" class="item-height">
          <el-form-item label="流程标题关联项">
            <el-select v-model="formInline.remark" class="full-width" placeholder="请选择类型" multiple>
              <el-option v-for="(item, index) in formItemKeyOptions" :key="index" :label="item.itemName" :value="item.serverBindLabel"> </el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="24" class="item-height">
          <el-form-item label="开始回掉API" prop="startCallBackApi">
            <el-input v-model="formInline.startCallBackApi" maxlength="600" class="input-box" placeholder="提审时调用"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24" class="item-height">
          <el-form-item label="结束回掉API" prop="endCallBackApi">
            <el-input v-model="formInline.endCallBackApi" maxlength="600" class="input-box" placeholder="流程结束(审批完成/驳回)时调用"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24" class="item-height">
          <el-form-item label="消息订阅API" prop="messageBookApi">
            <el-input v-model="formInline.messageBookApi" maxlength="600" class="input-box" placeholder="请输入消息订阅API"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24" class="item-height" v-if="formInline.messageBookApi">
          <el-form-item label="订阅类型" prop="messageBookTypeArr">
            <el-checkbox-group v-model="formInline.messageBookTypeArr">
              <el-checkbox label="process">审批中</el-checkbox>
              <el-checkbox label="taskprocess">任务单</el-checkbox>
              <el-checkbox label="notify">知会</el-checkbox>
              <el-checkbox label="addsign">加签</el-checkbox>
              <el-checkbox label="urge">催办</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </el-col>

        <el-col :span="20" class="item-height">
          <el-form-item label="无审批人规则" prop="handleType">
            <el-radio v-model="formInline.handleType" label="0" value="0">提审失败</el-radio>
            <el-radio v-model="formInline.handleType" label="1" value="1">流程结束</el-radio>
          </el-form-item>
        </el-col>

        <el-col :span="14" class="item-height">
          <el-form-item label="是否催办" prop="isUrge">
            <el-switch v-model="formInline.isUrge" active-value="1" inactive-value="0" active-color="#409EFF" inactive-color="#ff4949" @change="switchChange"> </el-switch>
          </el-form-item>
        </el-col>

        <template v-if="formInline.isUrge == 1">
          <el-col :span="12" class="item-height">
            <el-form-item label="催办方式" prop="urgeTypeArr">
              <el-checkbox-group v-model="formInline.urgeTypeArr" @change="checkboxChange">
                <el-checkbox label="1">人工催办</el-checkbox>
                <el-checkbox label="2">标红提示</el-checkbox>
                <el-checkbox label="3">系统自动催办</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </el-col>
          <template v-if="formInline.urgeTypeArr.indexOf('3') > -1 || formInline.urgeTypeArr.indexOf('2') > -1">
            <el-col :span="12" class="item-height">
              <el-form-item label="超时时间(h)" prop="processOutTime">
                <el-input-number v-model="formInline.processOutTime" :min="0" :max="100"></el-input-number>
              </el-form-item>
            </el-col>
            <template v-if="formInline.urgeTypeArr.indexOf('3') > -1">
              <el-col :span="24">
                <el-form-item label="催办日期" prop="urgeDates">
                  <div class="el-calendar reset-calendar">
                    <div class="el-calendar__body">
                      <table cellspacing="0" cellpadding="0" class="el-calendar-table">
                        <tbody>
                          <tr class="el-calendar-table__row" v-for="(item, index) in options" :key="index + 'A'">
                            <td class="current" :class="[formInline.urgeDatesArr.indexOf(itemData) > -1 ? 'is-selected is-today' : '']" v-for="(itemData, itemIndex) in item.list" :key="itemIndex" @click="selectDay(itemData)">
                              <div class="el-calendar-day">
                                <span>{{ itemData }}</span>
                              </div>
                            </td>
                          </tr>
                        </tbody>
                      </table>
                    </div>
                  </div>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="催办时间" prop="urgeTimes">
                  <el-select v-model="formInline.urgeTimesArr" multiple placeholder="请选择" class="full-width" @change="selectChange">
                    <el-option v-for="(item, index) in optionsshijian" :key="index" :label="item.value" :value="item.key"> </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </template>
          </template>
        </template>

        <el-col :span="24">
          <el-form-item label="流程说明" prop="processDesc">
            <el-input type="textarea" class="full-width" :autosize="{ minRows: 2, maxRows: 6 }" v-model="formInline.processDesc" placeholder="" maxlength="1000" show-word-limit></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" size="mini" @click="submitForm">保存</el-button>
    </div>
    <impower-manage class="margin-top-20" ref="impower" :process-data="formInline"></impower-manage>
  </div>
</template>

<script>
  import format from 'date-fns/format';
  import { apiFormList, procConfigCreate, procConfigsDetail, procConfigsUpdate, getFirmListByName, apiFormDetail, formItemList } from '../../../api/process';
  import ImpowerManage from './impowerManage';
  import { structureList } from '../../../api/structure';
  export default {
    data() {
      return {
        formInline: {
          pcDetailUrl: '',
          mobileDetailUrl: '',
          processName: '', //流程名称
          processType: '', //业务分类
          approvalType: '', //去重

          // processOutType: '1', //超时处理
          handleType: '0',
          processDesc: '', //流程说明
          message: '', //消息内容
          enterpriseCode: '', //企业
          remark: '',
          structure: '',
          strucCode: '',
          bizStructure: '',
          messageBookApi: '',
          messageBookType: '',
          messageBookTypeArr: [],
          isUrge: '0',
          urgeType: '',
          urgeTypeArr: '',
          processOutTime: '', //超时时间
          urgeDates: '',
          urgeDatesArr: [],
          urgeTimes: '',
          urgeTimesArr: [],
        },
        rules: {
          processName: [
            {
              required: true,
              message: '请输流程名称！',
              trigger: ['blur'],
            },
          ],
          processType: [
            {
              required: true,
              message: '请选择流程分类！',
              trigger: [''],
            },
          ],
          // enterpriseCode: [
          //   {
          //     required: true,
          //     message: "请选择关联企业！",
          //     trigger: [""]
          //   }
          // ],
          approvalType: [
            {
              required: true,
              message: '请选择去重复！',
              trigger: [''],
            },
          ],
          processOutTime: [
            {
              required: true,
              message: '请输入超时时间！',
              trigger: ['blur'],
            },
          ],
          processOutType: [
            {
              required: true,
              message: '请选择超时处理！',
              trigger: 'change',
            },
          ],
          handleType: [
            {
              required: true,
              message: '请选择无审批人规则！',
              trigger: 'change',
            },
          ],
          message: [
            {
              required: true,
              message: '请输入消息内容！',
              trigger: 'change',
            },
          ],
          processDesc: [
            {
              required: true,
              message: '请输入流程说明！',
              trigger: 'change',
            },
          ],
          messageBookTypeArr: [
            {
              required: true,
              message: '请选择订阅类型！',
              trigger: ['change', 'blur'],
            },
          ],
          urgeTypeArr: [
            {
              required: true,
              message: '请选择催办方式！',
              trigger: ['change', 'blur'],
            },
          ],
          urgeDates: [
            {
              required: true,
              message: '请选择催办日期！',
              trigger: 'change',
            },
          ],
          urgeTimes: [
            {
              required: true,
              message: '请选择催办时间！',
              trigger: 'change',
            },
          ],
        },
        primaryKey: '',
        firmList: [],
        formItemKeyOptions: [],
        options: [
          {
            list: ['1', '2', '3', '4', '5', '6', '7'],
          },
          {
            list: ['8', '9', '10', '11', '12', '13', '14'],
          },
          {
            list: ['15', '16', '17', '18', '19', '20', '21'],
          },
          {
            list: ['22', '23', '24', '25', '26', '27', '28'],
          },
          {
            list: ['29', '30', '31'],
          },
        ],
        optionsshijian: [
          {
            key: '0',
            value: '00:00',
          },
          {
            key: '1',
            value: '01:00',
          },
          {
            key: '2',
            value: '02:00',
          },
          {
            key: '3',
            value: '03:00',
          },
          {
            key: '4',
            value: '04:00',
          },
          {
            key: '5',
            value: '05:00',
          },
          {
            key: '6',
            value: '06:00',
          },
          {
            key: '7',
            value: '07:00',
          },
          {
            key: '8',
            value: '08:00',
          },
          {
            key: '9',
            value: '09:00',
          },
          {
            key: '10',
            value: '10:00',
          },
          {
            key: '11',
            value: '11:00',
          },
          {
            key: '12',
            value: '12:00',
          },
          {
            key: '13',
            value: '13:00',
          },
          {
            key: '14',
            value: '14:00',
          },
          {
            key: '15',
            value: '15:00',
          },
          {
            key: '16',
            value: '16:00',
          },
          {
            key: '17',
            value: '17:00',
          },
          {
            key: '18',
            value: '18:00',
          },
          {
            key: '19',
            value: '19:00',
          },
          {
            key: '20',
            value: '20:00',
          },
          {
            key: '21',
            value: '21:00',
          },
          {
            key: '22',
            value: '22:00',
          },
          {
            key: '23',
            value: '23:00',
          },
        ],
        structureList: [],
        formList: [],
      };
    },
    components: {
      ImpowerManage,
    },
    mounted() {
      this.getStructureList();
      this.getFormList();
    },
    methods: {
      async getStructureList() {
        const { rows, total } = await structureList({ structureType: 2 });
        this.structureList = rows;
      },
      async getFormList() {
        const { rows, total } = await apiFormList({ formType: 1, parentFormKey: 'null' });
        this.formList = rows;
      },
      submitForm() {
        this.$refs.form.validate(valid => {
          if (valid) {
            // 防止频繁保存
            let that = this;
            if (this.ISPOST) {
              this.$message({
                message: '操作太频繁！',
                type: 'warning',
              });
              return;
            }

            this.ISPOST = true;
            setTimeout(() => {
              that.ISPOST = false;
            }, 3000);

            this.save();
          } else {
            this.$message({
              message: '请输入必填项!',
              type: 'warning',
            });
          }
        });
      },
      async save() {
        let formData = Object.assign({}, this.formInline);
        formData.remark = formData.remark ? formData.remark.join(',') : '';

        formData.messageBookType = formData.messageBookTypeArr ? formData.messageBookTypeArr.join(',') : '';
        formData.urgeType = formData.urgeTypeArr ? formData.urgeTypeArr.join(',') : '';
        formData.urgeDates = formData.urgeDatesArr ? formData.urgeDatesArr.join(',') : '';
        formData.urgeTimes = formData.urgeTimesArr ? formData.urgeTimesArr.join(',') : '';
        formData.structure = formData.strucCode;
        formData.key = this.$route.query.key || null;

        let res = this.$route.query.key ? await procConfigsUpdate(formData) : await procConfigCreate(formData);
        if (res.success) {
          this.$emit('setProcessData', formData);
          this.$message.success(res.message);
          let params = {
            key: this.$route.query.key ? this.$route.query.key : res.key,
            tab: this.$route.query.tab,
            strucCode: this.$route.query.key ? this.$route.query.strucCode : res.extend.struc_code,
          };
          if (this.$route.query.key && this.$route.query.primaryKey) {
            params.primaryKey = this.$route.query.primaryKey;
          }
          let pathUrl = {
            name: 'flow-info',
            query: params,
          };
          this.$router.replace(pathUrl);
        } else {
          this.$message.error(res.message);
        }
      },
      async getInfo() {
        if (this.$route.query.primaryKey) {
          this.getFormItemList();
        }

        this.$refs.impower.getNodeCodeList();
        this.$refs.impower.getInfo();
        let res = await procConfigsDetail({
          primaryKey: this.$route.query.key,
        });
        if (res.success) {
          res.processType = res.processType ? res.processType.toString() : '';
          res.processOutType = res.processOutType ? res.processOutType.toString() : '';
          res.handleType = res.handleType ? res.handleType.toString() : '';
          res.approvalType = res.approvalType ? res.approvalType.toString() : '';
          res.remark = res.remark ? res.remark.split(',') : [];

          res.messageBookTypeArr = res.messageBookType ? res.messageBookType.split(',') : [];
          res.urgeTypeArr = res.urgeType ? res.urgeType.split(',') : [];
          res.urgeDatesArr = res.urgeDates ? res.urgeDates.split(',') : [];
          res.urgeTimesArr = res.urgeTimes ? res.urgeTimes.split(',') : [];

          this.formInline = res;
          this.formInline.primaryKey = this.$route.query.key;
          this.remoteMethod(this.formInline.enterpriseName);
          this.$emit('setProcessData', this.formInline);
        } else {
          this.$message.error(res.message);
        }
      },
      //企业列表
      async remoteMethod(val) {
        let res = await getFirmListByName({
          structureCode: 'ee4062d0532f45fe9042192bfcaeb4e2',
          orgName: val,
        });
        this.firmList = res.rows || [];
      },
      //查询下拉
      async getFormItemList() {
        const result = await apiFormDetail(this.$route.query.primaryKey);

        if (!!result) {
          const res = await formItemList({
            formKey: this.$route.query.primaryKey,
            formVersion: result.formVersion,
          });
          if (res.success) {
            this.formItemKeyOptions = res.rows;
          }
        }
      },
      switchChange() {
        this.formInline.urgeType = '';
        this.formInline.urgeTypeArr = [];

        this.formInline.processOutTime = '';

        this.formInline.urgeDates = '';
        this.formInline.urgeDatesArr = [];

        this.formInline.urgeTimes = '';
        this.formInline.urgeTimesArr = [];
      },
      checkboxChange(val) {
        if (this.formInline.urgeTypeArr.indexOf('3') > -1 || this.formInline.urgeTypeArr.indexOf('2') > -1) {
          if (this.formInline.urgeTypeArr.indexOf('3') <= -1) {
            this.formInline.urgeDates = '';
            this.formInline.urgeDatesArr = [];

            this.formInline.urgeTimes = '';
            this.formInline.urgeTimesArr = [];
          }
        } else {
          this.formInline.processOutTime = '';
        }
      },
      selectChange() {
        this.formInline.urgeTimes = this.formInline.urgeTimesArr.length ? this.formInline.urgeTimesArr.join(',') : '';
      },
      selectDay(itemData) {
        let index = this.formInline.urgeDatesArr.indexOf(itemData);
        if (index > -1) {
          this.formInline.urgeDatesArr.splice(index, 1);
        } else {
          this.formInline.urgeDatesArr.push(itemData);
        }
        this.formInline.urgeDates = this.formInline.urgeDatesArr.length ? this.formInline.urgeDatesArr.join(',') : '';
      },
      goStructureDetail() {
        let pathUrl = {
          name: 'person-structure-detail',
          query: {
            primaryKey: this.formInline.strucCode,
          },
        };
        let url = this.$router.resolve(pathUrl);
        window.open(url.href, '_blank');
      },
      goFormDetail() {
        let pathUrl = {
          name: 'process-form-detail',
          query: {
            primaryKey: this.formInline.formKey,
          },
        };
        let url = this.$router.resolve(pathUrl);
        window.open(url.href, '_blank');
      },
    },
  };
</script>

<style lang="scss" scoped>
  ::v-deep .el-form-item__label{
    padding-left: 0;
  }
  .log .label {
    line-height: 1.5;
    white-space: pre-line;
  }

  .split-line {
    width: 100%;
    font-size: 15px;
    font-weight: 700;
    /* border-bottom: 1px solid #f1f1f1; */
    padding: 15px 0;
  }
  .dialog-footer {
    display: flex;
    justify-content: flex-end;
  }
  .item-height {
    height: 51px;
  }

  .reset-calendar {
    width: 395px;
    .el-calendar__body {
      padding: 0;

      .el-calendar-day {
        height: 55px;
      }
    }
  }
</style>
